<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		
		<!-- HTML事件处理程序---直接卸载标签内 -->
		<div id="box" style="width: 100px;height: 100px;background-color: skyblue;" onclick="this.innerHTML += '1'">
		</div>
		
		
		<!-- ODM-0级事件处理程序(优先级最高)---在js里写脚本 -->
		<div id="box1" style="width: 100px;height: 100px;background-color: hotpink;">
		</div>
		<script type="text/javascript">
			var box1 = document.getElementById('box1')
			box1.onclick = function(){
				box1.style.backgroundColor = 'skyblue'
			}
			// 删除事件处理程序
			// box1.onclick = null;
			
		</script>
		
		<!-- DOM-2级事件处理程序 -->
		<!--添加 -->
		<div id="box2" style="width: 100px;height: 100px;background-color: dimgrey;">
		</div>
		<script type="text/javascript">
			// IE8不支持DOM-2级事件
			// addEventListener(事件名，处理函数，布尔值)  removeEventListener(事件名，处理函数，布尔值)
			var box2 = document.getElementById('box2')
			// 先点打印1 再点变颜色
			
			setTimeout(function(){
				box2.addEventListener('click',function(){
					this.style.backgroundColor = 'skyblue';
				},false)
			},2000)
			box2.addEventListener('click',function(){
				this.innerHTML = '1';
			},false)
			box2.removeEventListener()
		</script>
		<!-- 移除 -->
		<script type="text/javascript">
			function test(){
				this.innerHTML += 3;
			}
			box2.addEventListener('click',test,false)
			box2.removeEventListener('click',test,false)
		</script>
		
		
		
		<!-- IE事件处理程序 -->
		<div id="box3" style="width: 100px;height: 100px;background-color: dimgrey;">
		</div>
		<script type="text/javascript">
			// 只适应于IE浏览器。
			// attachEvent()  detachEvent()
		</script>
		
		<!-- 兼容写法 -->
		<div id="box4" style="width: 100px;height: 100px;background-color:darkorange;">
		</div>
		<script type="text/javascript">
			var  box4 = document.getElementById('box4')
			box4.addEventListener('click',fn,false)
			box4.attachEvent('onclick',fn,false)
		</script>
		
	</body>
</html>
